<template>
  <!-- 这个 Vue.js 组件是一个以太网设置界面，允许用户配置网络接口的 IP 地址、子网掩码、默认网关、DNS 等参数。 -->
  <div class="ethernet-settings">
    <div class="top-box">
      <v-container fluid>
        <!-- v-container 和 v-row 是 Vuetify 提供的布局组件，用于创建响应式布局。
             v-col 用于定义列，cols="4" 表示占据 4 列，cols="8" 表示占据 8 列。
             v-text-field 是一个输入框组件，v-model 绑定到 nic 数据属性，disabled 属性使其不可编辑。 -->
        <v-row align="center">
          <v-col cols="4" class="d-flex justify-center text-center">
            <div class="config-item">
              网卡
            </div>
          </v-col>
          <v-col cols="8" class="d-flex text-center">
            <v-text-field
                v-model="nic"
                label="网卡"
                class="config-content justify-center"
                dense
                hide-details
                disabled></v-text-field>
          </v-col>
        </v-row>
        <v-row align="center">
          <v-col cols="4" class="d-flex justify-center text-center">
            <div class="config-item">
              IP地址
            </div>
          </v-col>
          <v-col cols="8" class="d-flex text-center">
            <!-- v-text-field 绑定到 ipAddress，:disabled=autoGetIP 表示当 autoGetIP 为 true 时禁用输入框 -->
            <v-text-field
                v-model="ipAddress"
                label="192.168.3.3"
                class="config-content justify-center"
                dense
                :disabled=autoGetIP
                hide-details></v-text-field>
          </v-col>
        </v-row>
        <v-row align="center">
          <v-col cols="4" class="d-flex justify-center text-center">
            <div class="config-item">
              默认网关
            </div>
          </v-col>
          <v-col cols="8" class="d-flex text-center">
            <!-- 绑定到 defaultGateway，同样受 autoGetIP 控制。 -->
            <v-text-field
                v-model="defaultGateway"
                label="192.168.3.1"
                class="config-content"
                dense
                :disabled=autoGetIP
                hide-details></v-text-field>
          </v-col>
        </v-row>
        <v-row align="center">
          <v-col cols="4" class="d-flex justify-center text-center">
            <div class="config-item">
              子网掩码
            </div>
          </v-col>
          <v-col cols="8" class="d-flex text-center">
            <!-- 绑定到 mask，同样受 autoGetIP 控制。 -->
            <v-text-field
                v-model="mask"
                label="255.255.0.0"
                class="config-content"
                dense
                :disabled=autoGetIP
                hide-details></v-text-field>
          </v-col>
        </v-row>
        <v-row align="center">
          <v-col cols="4" class="d-flex justify-center text-center">
            <div class="config-item">
              MAC地址
            </div>
          </v-col>
          <v-col cols="8" class="d-flex text-center">
            <!-- 绑定到 macAddress，不可编辑。 -->
            <v-text-field
                v-model="macAddress"
                label="MAC地址"
                class="config-content"
                dense
                hide-details
                disabled></v-text-field>
          </v-col>
        </v-row>
        <v-row align="center">
          <v-col cols="4" class="d-flex justify-center text-center">
            <div class="config-item">
              DNS
            </div>
          </v-col>
          <v-col cols="8" class="d-flex text-center">
            <!-- 绑定到 DNS，同样受 autoGetIP 控制。 -->
            <v-text-field
                v-model="DNS"
                label="114.114.114.114"
                class="config-content"
                dense
                :disabled=autoGetIP
                hide-details></v-text-field>
          </v-col>
        </v-row>
      </v-container>
    </div>
    <div class="bottom-box">
      <!-- v-checkbox 绑定到 autoGetIP，用于控制是否自动获取 IP 地址。
           v-btn 用于创建按钮，@click 绑定到 refresh 和 save 方法。 -->
      <v-container fluid>
        <v-row align="center" justify="center">
          <v-checkbox
              v-model="autoGetIP"
              dense
              label="自动获取IP地址"></v-checkbox>
        </v-row>
        <v-row align="center" justify="center">
          <v-btn @click="refresh" class="refresh-btn"
                 style="background-color: #003366; color: white; margin-right: 10px;">刷新
          </v-btn>
          <v-btn class="save-btn" @click="save" style="background-color: #FFA500; color: white;">保存</v-btn>
        </v-row>
      </v-container>
    </div>
  </div>
</template>

<script>
const ipRule = /^(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/
const maskRule = /^(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(254|252|248|240|224|192|128|0)$/
const gatewayBaseRule=/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
// const data = {
//   nic: "ETH0",
//   ipAddress: "",
//   defaultGateway: "",
//   mask: "",
//   MacAddress: "AE:IE:7F:00:00:00",
//   DNS: "",
//   autoGetIP: false
// };
export default {
  name: 'EthernetSettingsContent',
  data() {
    // ethernetData
// nic:
// 含义: 代表网络接口的名称或标识符。
// 示例值: "ETH0" 表示这是第一个以太网接口。
// 作用: 用于在系统中唯一标识这个网络接口，通常在多个网络接口的情况下使用。

// ipAddress:
// 含义: 代表网络接口的 IP 地址。
// 示例值: "" 表示当前未设置具体的 IP 地址。
// 作用: 这是设备在网络中使用的地址，通常用于设备间的通信。

// defaultGateway:
// 含义: 代表默认网关的 IP 地址。
// 示例值: "" 表示当前未设置具体的默认网关。
// 作用: 默认网关是路由器的 IP 地址，设备使用它来访问外部网络或互联网。

// mask:
// 含义: 代表子网掩码。
// 示例值: "" 表示当前未设置具体的子网掩码。
// 作用: 子网掩码用于确定 IP 地址的网络部分和主机部分，帮助设备在网络中进行正确的地址解析和路由。

// macAddress:
// 含义: 代表网络接口的 MAC 地址。
// 示例值: "AE:IE:7F:00:00:00" 是一个示例的 MAC 地址。
// 作用: MAC 地址是网络接口的硬件地址，用于在局域网中唯一标识设备。

// DNS:
// 含义: 代表域名系统（DNS）的服务器地址。
// 示例值: "" 表示当前未设置具体的 DNS 服务器地址。
// 作用: DNS 用于将域名解析为 IP 地址，设备通过 DNS 服务器获取访问外部资源所需的地址。

// autoGetIP:
// 含义: 代表是否自动获取 IP 地址。
// 示例值: true 表示启用自动获取 IP 地址的功能。
// 作用: 如果设置为 true，设备将在启动时通过 DHCP（动态主机配置协议）自动获取 IP 地址和其他网络设置，而不是手动配置。
    const ethernetJson = require('../../static/ethernet.json');
    let {nic, ipAddress, defaultGateway, mask, macAddress, DNS, autoGetIP} = ethernetJson;
    return {
      nic, ipAddress, defaultGateway, mask, macAddress, DNS, autoGetIP
    };
  },
  methods: {
    // refresh 方法将当前项目保存到 localStorage，并触发 refresh 事件。
    refresh() {
      // 刷新逻辑
      localStorage.setItem('curItem', '以太网设置');
      this.$emit('refresh')
    },
    // save 方法首先检查 autoGetIP 是否为 false，然后验证 IP 地址、网关和子网掩码的格式。
// 如果格式正确，进一步检查 IP 地址和网关是否在同一子网内。

    save() {
      if (!this.autoGetIP) {
        if (!ipRule.test(this.ipAddress)) {
          this.$emit('errMsg','IP格式有误');
          return;
        } else if (!gatewayBaseRule.test(this.defaultGateway)) {
          this.$emit('errMsg','网关格式有误');
          return;
        } else if (!maskRule.test(this.mask)) {
          this.$emit('errMsg','子网掩码格式有误');
          return;
        } else {
          let judgeIp = [];
          let judgeMask = [];
          let judgeGateway = [];
          judgeIp = this.ipAddress.split('.');
          judgeMask = this.mask.split('.');
          judgeGateway = this.defaultGateway.split('.')
          const res0 = parseInt(judgeIp[0]) & parseInt(judgeMask[0]);
          const res1 = parseInt(judgeIp[1]) & parseInt(judgeMask[1]);
          const res2 = parseInt(judgeIp[2]) & parseInt(judgeMask[2]);
          const res3 = parseInt(judgeIp[3]) & parseInt(judgeMask[3]);

          const res0_gw = parseInt(judgeGateway[0]) & parseInt(judgeMask[0]);
          const res1_gw = parseInt(judgeGateway[1]) & parseInt(judgeMask[1]);
          const res2_gw = parseInt(judgeGateway[2]) & parseInt(judgeMask[2]);
          const res3_gw = parseInt(judgeGateway[3]) & parseInt(judgeMask[3]);

          if (!(res0 === res0_gw && res1 === res1_gw && res2 === res2_gw && res3 === res3_gw)) {
            this.$emit('errMsg','网关配置有误');
            return;
          }
        }
      }
      // 保存逻辑
      const formattedConfig = {
        "cmd": 241,
        "config": {
          "ethernet": {
            [this.nic.toLowerCase()]: {
              "bootproto": this.autoGetIP ? 1 : 0,
              "type": 0,
              "ipaddr": this.ipAddress,
              "mask": this.mask,
              "gateway": this.defaultGateway
            }
          }
        }
      };
      const jsonData = JSON.stringify(formattedConfig);
      this.$emit('sendData', jsonData);
    }
  },
};
</script>

<style scoped>
.ethernet-settings {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: calc(80vh - 60px);
  padding-top: 10vh;
}

.top-box {
  padding: 20px;
  box-sizing: border-box;
}

.config-item, .config-content {
  margin-bottom: 10px;
  text-align: center;
}

.bottom-box {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.refresh-btn {
  background-color: #003366;
  color: white;
  margin-right: 10px;
  width: 200px;
}

.save-btn {
  background-color: #FFA500;
  color: white;
}
</style>
